<template>
    <main>
        <div class="top">
            <div class="top-box gWidth gCenter">
                <h2 class="module-title">新闻资讯</h2>
            </div>
        </div>

        <div class="mid gWidth gCenter clearfix">
            <div class="left fl">
                <themes-list></themes-list>
            </div>
            <div class="right fl">
                <div class="title-box">
                    <h3 class="news-title">{{news.title}}</h3>
                    <div class="title-info-box">
                        <span class="author">{{news.author}}</span>
                        <span class="date">{{new Date(news.postDate).toDateString()}}</span>
                    </div>
                </div>
                <hr>
                <div class="content" v-html="news.content">
                </div>
            </div>
        </div>
    </main>
</template>

<script>
    import themesList from '@/components/module/themes-list'
    import newsApi from '@/api/news'

    export default {
        name: "news-content",
        props:['newsId'],
        components:{
            'themes-list':themesList
        },
        data:function () {
            return {news:{}}
        },
        mounted:function () {
            const _this = this;
            //获取文章
            newsApi.findById(_this.newsId)
                .then(function (data) {
                    _this.news = data;
                })
        }
    }

</script>

<style scoped>
    main{
        margin-top: 0;
    }
    main>.top {
        height: 400px;
        background-color: #000000;
        background: url("../../../static/images/module-top.jpg");
        background-size: 100% 100%;
    }
    main>.mid{
        padding-top: 40px;
    }
    main>.mid>.left{
        width: 30%;
    }
    main>.mid>.right{
        width: 70%;
    }
    main>.top>.top-box{
        position: relative;
        height: 100%;
    }
    main>.top>.top-box>.module-title{
        width: 200px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        position: absolute;
        bottom: 0px;
        left: 30px;
        color: white;
        font-weight: normal;
        background-color: #004a9899;
    }

    main>.mid>.left{
        padding: 0px 30px;
        box-sizing: border-box;
    }

    main>.mid>.right{
        background-color: #fbfbfb;
        box-sizing: border-box;
        padding: 0px 20px;
        padding-bottom: 50px;
    }
    main>.mid>.right>.title-box{
        height: fit-content;
    }
    main>.mid>.right>.title-box>.news-title{
        color: #004a98;
        text-align: center;
        height: 50px;
        line-height: 50px;
        margin-top: 20px;
    }
    main>.mid>.right>.title-box>.title-info-box{
        color: #c3c8cd;
        font-size: small;
        text-align: center;
    }
    main>.mid>.right>.title-box>.title-info-box>span{
        padding-left: 50px;
        padding-right: 50px;
        margin-bottom: 10px;
    }
    main>.mid>.right>hr{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    main>.mid>.right>.content p{
        line-height: 25px;
        padding-top: 15px;
    }

    main>.mid>.right>.content .img_wrapper{
        text-align: center;
    }
    main>.mid>.right>.content .img_wrapper img{
        display: block;
        margin: 0 auto;
        max-width: 600px;
        text-align: center;
    }
    main>.mid>.right>.content .img_wrapper>span{
        display: block;
        font-size: small;
        padding-top: 10px;
    }

</style>
